<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div class="newsList"  ref="wrapper">
    <headers text="黑马物有钱慢慢看" style=" position: fixed;
  top: 0;
  left: 0;
  width: 100%;">
    </headers>
    <graphic text='图文资讯'>
      <template #left>
<span @click="$router.go(-1)" :class="['iconfont','icon-jiantou2']">返回</span>
      </template>
    </graphic>
<div class="goods" v-for="value in goodslist" :key="value.id" @click="$router.push({path:`/Newsgoodlist/${value.id}`})">
<div class="good">
  <div class="left">
    <img :src="value.img_url" alt="">
  </div>
<div class="right">
<span>{{value.title}}</span>
<p class="publish">{{value.add_time}} <span>点击:{{value.click}}</span></p>
</div>
</div>
</div>

    <footers ></footers>
</div>
</template>


<script>
import headers from '../../components/headers.vue'
import footers from '../../components/footers.vue'
import graphic from '../../components/graphic.vue'
import {mygraphic} from '../../apis/graphic'
import axios from '../../untils/request'
export default {
  components: { footers, headers ,graphic},
  data() {
    return {
      goodslist:[]
    };
  },
 
  methods: {},
 async mounted(){
 this.goodslist= (await mygraphic()).data.message
 this.goodslist.img_url=axios.defaults.baseURL+this.goodslist.img_url
  }
};
</script>


<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style lang='less' scoped>
@import url('//at.alicdn.com/t/font_2621049_d43meoif9r.css');
.goods{
  padding:0 10px;
  border-bottom: 1px solid #e9e9e9;
  
  .good{
display: flex;
height: 85px;
padding: 10px 0;
  }
  .left{
  width: 15%;
  img{
    width: 100%;
    height: 100%;
    background-size: cover;
  }
}
.right{
  color: #767676;
  padding:0 5px;
  width: 85%;
.publish{
  color: #63a5dc;
display: flex;
justify-content:space-between;
}
}
}
.newsList{
  padding-bottom: 50px;
}
</style>